const string = `
/*
 *今天要送你一个会动的冰墩墩
 */
  body {
    position: relative;
  }
  /*
  *首先，画一个冰墩墩的身体
  */
  .skin {
   border: 3px solid black;
   width: 340px;
   height: 420px;
   position: absolute;
   left: 50%;
   top: 10px;
   margin-left: -170px;
   border-radius: 40% 40% 48% 48%;
   background: white;
   overflow: hidden;
 }
 /*
  * 然后，画冰墩墩的耳朵
  */
 .ear {
   width: 60px;
   height: 60px;
   border-radius: 44%;
   background: black;
   position: absolute;
   top: 10px;
 }
 .ear.left {
   left: 80px;
 }
 .ear.right {
   right: 80px;
 }
 /*
  *现在开始画冰墩墩可爱的脸
  */
    .line {
     position: absolute;
     width: 286px;
     height: 262px;
     left: 12px;
     top: 10px;
     border-radius: 93% 90% 75% 74%;
   }
   .line.one {
     border: 10px solid #8be6fa;
   }
   .line.two {
     border: 8px solid #b0fca5;
   }
   .line.three {
     border: 6px solid #d478fd;
   }
   .line.four {
     border: 4px solid #febd43;
   }
   .line.five {
     border: 2px solid #3477de;
   }
   /*
    *首先，画冰墩墩的眼睛
    */
    .eye {
     width: 130px;
     height: 78px;
     position: absolute;
     border-radius: 60%;
     left: 50%;
     top: 72px;
     background: black;
   }
   .eye.left {
     margin-left: -136px;
     transform: rotate(-40deg);
   }
   .eye.right {
     margin-left: 6px;
     transform: rotate(40deg);
   }
   .eye .white-eye {
     width: 54px;
     height: 54px;
     border-radius: 50%;
     position: absolute;
     background: white;
   }
   .eye.left .white-eye {
     left: 48px;
     top: 16px;
   }
   .eye.right .white-eye {
     right: 48px;
     top: 16px;
   }
   .eye .grey-eye {
     width: 44px;
     height: 44px;
     position: absolute;
     left: 6px;
     top: 6px;
     border-radius: 50%;
     background: #3e3d34;
   }
   .eye .grey-eye::before {
     content: "";
     display: block;
     width: 14px;
     height: 14px;
     position: relative;
     top: 7px;
     border-radius: 50%;
     background: white;
   }
   .eye.left .grey-eye::before {
     left: 24px;
   }
   .eye.right .grey-eye::before {
     left: 5px;
   }
   /*
    *然后画冰墩墩的鼻子
    */
    .nose {
     width: 33px;
     height: 24px;
     border-radius: 100%;
     background-color: #0f0f10;
     position: absolute;
     top: 118px;
     left: 152px;
     z-index: 10;
   }
   .nose::after {
     content: "";
     display: block;
     width: 16px;
     height: 5px;
     border-radius: 100%;
     background: linear-gradient(
       to bottom,
       rgba(255, 255, 255, 0.5),
       rgba(255, 255, 255, 0)
     );
     margin: 0 auto;
     margin-top: 4px;
   }
   /*
    *然后画冰墩墩的嘴
    */
    .mouth {
     width: 92px;
     height: 40px;
     position: absolute;
     top: 126px;
     left: 121px;
     z-index: 3;
     border-bottom: 3px solid #0f0f10;
     box-shadow: 0 2px #0f0f10;
     border-radius: 100%;
     background: white;
   }
   .mouth-down {
     width: 80px;
     height: 44px;
     position: absolute;
     top: 128px;
     left: 127px;
     border-bottom: 2px solid #0f0f10;
     border-radius: 100%;
     margin: 0 auto;
     z-index: 1;
     background-color: #a51320;
   }
   /*
    *接下来，画冰墩墩的胳膊
    */
    .arm {
     width: 170px;
     height: 80px;
     background-color: #0f0f10;
     position: absolute;
   }
   .arm.left {
     left: -48px;
     top: 240px;
     border-radius: 50% 30% 50px 50px;
     transform: rotate(-55deg);
     animation: 2s ease-in-out 1.1s infinite Wave;
   }
   .arm.right {
     position: absolute;
     right: -48px;
     top: 74px;
     border-radius: 80% 50px 80px 80%;
     transform: rotate(-45deg);
     animation: 2s ease-in-out 1s infinite Wave-r;
   }
   /*
    *现在让冰墩墩的胳膊动起来
    */
   @keyframes Wave {
     0% {
       transform: rotate(-55deg);
     }
     10% {
       transform: rotate(-60deg);
       box-shadow: 0 10px 10px rgba(15, 15, 16, 0.3);
     }
     20% {
       transform: rotate(-50deg);
     }
     30% {
       transform: rotate(-58deg);
     }
     40%,
     50%,
     60%,
     70%,
     80%,
     90%,
     100% {
       transform: rotate(-55deg);
     }
   }
   @keyframes Wave-r {
     0% {
       transform: rotate(-58deg);
     }
     10% {
       transform: rotate(-72deg);
       box-shadow: 0px -10px 10px rgba(15, 15, 16, 0.3);
     }
     20% {
       transform: rotate(-45deg);
       box-shadow: 0 10px 10px rgba(15, 15, 16, 0.3);
     }
     30% {
       transform: rotate(-70deg);
       box-shadow: 0px -10px 10px rgba(15, 15, 16, 0.3);
     }
     40%,
     50%,
     60%,
     70%,
     80%,
     90%,
     100% {
       transform: rotate(-58deg);
     }
   }
   /*
    *画个胳膊上的小红心
    */
    .heart .one {
     width: 35px;
     height: 20px;
     background-color: #ad2025;
     position: absolute;
     top: 28px;
     left: 128px;
     border-radius: 0 50% 50% 0;
   }
   .heart .another {
     width: 35px;
     height: 20px;
     background-color: #ad2025;
     position: absolute;
     top: 20px;
     left: 120px;
     border-radius: 0 50% 50% 0;
     transform: rotate(-90deg);
   }
   /*
    *最后画冰墩墩的腿
    */
    .leg {
     width: 90px;
     height: 135px;
     background-color: #0f0f10;
     position: absolute;
     bottom: 10px;
   }
   .leg.left {
     left: 94px;
     border-radius: 16% 70% 30% 50px;
     transform: rotate(-3deg);
   }
   .leg.right {
     left: 212px;
     border-radius: 70% 16% 50px 30%;
     transform: rotate(4deg);
   }
   /*
    *最终一个冰墩墩就完成了
    */
`;
const player = {
  ui: {
    demo: document.querySelector("#demo"),
    demo2: document.querySelector("#demo2"),
  },
  events: {
    "#btnPause": "pause",
    "#btnPlay": "play",
    "#btnSlow": "slow",
    "#btnNormal": "normal",
    "#btnFast": "fast",
  },
  id: undefined,
  time: 50,
  n: 1,
  init: () => {
    player.ui.demo.innerText = string.substring(0, player.n);
    player.ui.demo2.innerHTML = string.substring(0, player.n);
    player.bindEvents();
    player.play();
  },

  bindEvents: () => {
    for (let key in player.events) {
      if (player.events.hasOwnProperty(key)) {
        const value = player.events[key];
        document.querySelector(key).onclick = player[value];
      }
    }
  },
  run: () => {
    player.n += 1;
    if (player.n > string.length) {
      window.clearInterval(player.id);
      return;
    }
    player.ui.demo.innerText = string.substring(0, player.n);
    player.ui.demo2.innerHTML = string.substring(0, player.n);
    player.ui.demo.scrollTop = demo.scrollHeight;
  },
  play: () => {
    player.id = setInterval(player.run, player.time);
  },
  pause: () => {
    window.clearInterval(player.id);
  },
  slow: () => {
    player.pause();
    player.time = 100;
    player.play();
  },
  normal: () => {
    player.pause();
    player.time = 50;
    player.play();
  },
  fast: () => {
    player.pause();
    player.time = 0;
    player.play();
  },
};

player.init();
